<!-- 注册 -->
<template>
	<view class="container">
		<view class="wrapper">
			<!-- 登录tab -->
			<view class="tab-boxs">
				<view class="tab-box x-f">
					<view class="tab-item x-c" @tap="onLoginWay(0)">
						<text class="tab-title">学员注册</text>
						<view class="line-box" v-show="loginWay === 0"><text class="triangle"></text></view>
					</view>
					<view class="tab-item x-c" @tap="onLoginWay(1)">
						<text class="tab-title">教练注册</text>
						<view class="line-box" v-show="loginWay === 1"><text class="triangle"></text></view>
					</view>
				</view>
			</view>

			<!-- 表单 -->
			<view class="login-box y-f">
				<view class="input-item">
					<text class="inp-title"><text class="text-red margin-right-xs">*</text>驾校名称</text>
					<input class="inp" v-model="jxname" placeholder="请输入驾校名称" placeholder-class="pl" />
				</view>
				<view class="input-item">
					<text class="inp-title"><text class="text-red margin-right-xs">*</text>姓名</text>
					<input class="inp" v-model="name" placeholder="请输入姓名" placeholder-class="pl" />
				</view>
				<view class="input-item">
					<text class="inp-title"><text class="text-red margin-right-xs">*</text>手机号</text>
					<input class="inp" v-model="userPhone" type="number" placeholder="请输入手机号" placeholder-class="pl" />
				</view>
				<view class="input-item">
					<text class="inp-title"><text class="text-red margin-right-xs">*</text>身份证号</text>
					<input class="inp" v-model="cardNumber" type="number" placeholder="请输入身份证号"
						placeholder-class="pl" />
				</view>
				<view class="input-item">
					<text class="inp-title"><text class="text-red margin-right-xs">*</text>设置密码</text>
					<input class="inp" password v-model="userPassword" type="text" placeholder="请次输入新密码"
						placeholder-class="pl" />
				</view>
				<view class="input-item">
					<text class="inp-title"><text class="text-red margin-right-xs">*</text>确认密码</text>
					<input class="inp" password v-model="userPasswordTwo" type="text" placeholder="请再次输入新密码"
						placeholder-class="pl" />
				</view>
				<view class="tip-box" @tap="onTcp">
					<label class="x-f">
						<radio class="tcp-radio blue" :class="{ checked: isTcp }" :checked="isTcp"></radio>
						<view class="">
							我已阅读并遵守
							<text class="tcp text-blue" @tap="jump('/pages/public/richtext', { id: 1 })">《用户协议》</text>
							<text class="tcp text-blue" @tap="jump('/pages/public/richtext', { id: 2 })">《隐私协议》</text>
						</view>
					</label>
				</view>
				<!-- 按钮 -->
				<view class=" padding-lr" style="width: 100%;">
					<button :disabled="isLoading" class="cu-btn login-btn bg-blue block" @tap="register">
						<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin"></text>
						立即注册
					</button>
					<button class="cu-btn reset-btn block" @tap="reset">
						重置信息
					</button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginWay: 0,
				jxname: '',
				name: '',
				userPhone: '',
				userPassword: '',
				userPasswordTwo: '',
				cardNumber: '',
				isTcp: false, //协议
				isLoading: false, //注册loading
				sysInfo: uni.getStorageSync('sysInfo')
			};
		},
		computed: {},
		onLoad() {},
		methods: {
			onLoginWay(flag) {
				this.loginWay = flag;
			},
			reset() {
				this.jxname = '';
				this.name = '';
				this.userPhone = '';
				this.userPassword = '';
				this.userPasswordTwo = '';
				this.cardNumber = '';
				this.isTcp = false; //协议
			},

			register() {
				let that = this;
				if (this.isTcp) {
					this.isLoading = true;
					uni.request({
						url: '',
						data: {
							jxname: this.jxname,
							name: this.name,
							userPhone: this.userPhone,
							userPassword:this.userPassword,
							userPasswordTwo:this.userPasswordTwo,
							cardNumber:this.cardNumber,
							loginWay:this.loginWay
						},
						method: 'POST',
						success: (res) => {
							if (res.code === 1) {
								this.isLoading = false;
								const userdata = res.data.data
								userinfo_check.userdata = userdata
								uni.setStorageSync('userinfo', userinfo_check)
								uni.showToast({
									title: res.msg || '注册成功,请前往登录',
									duration: 2000,
									icon: 'none'
								});
								uni.removeStorageSync('userinfo');
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/public/login',
									});
								}, 1500)
							}
						},
						fail: (err) => {
					
						}
					});
				} else {
					uni.showToast({
						title:  '请先同意协议！',
						duration: 2000,
						icon: 'error'
					});
				}
			},

			onTcp() {
				this.isTcp = !this.isTcp;
			}
		}
	};
</script>

<style lang="scss">
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #fff;

		// titleview
		.head-box {
			.cuIcon-back {
				font-size: 50rpx !important;
				font-weight: 500;
			}
		}

		// logo
		.logo {
			width: 410rpx;
			height: 120rpx;
		}

		.logo-bg {
			width: 640rpx;
			height: 300rpx;
		}
	}

	.wrapper {
		position: absolute;
		z-index: 90;
		padding-bottom: 40upx;
		// padding-top: 115px;
		width: 100vw;
		height: 100vh;
		top: 0;

		// 登录
		.login-btn {
			width: 100%;
			height: 80upx;
			// border-radius: 10rpx;
			color: #fff;
			font-size: 32rpx;
			margin-top: 20upx;
		}
		.reset-btn {
			width: 100%;
			height: 80upx;
			// border-radius: 10rpx;
			border: solid 1px #DDDDDD;
			margin-top: 30upx;
			color: #333;
			font-size: 32rpx;
		}

		// 登录选项卡
		.tab-boxs {
			padding: 30rpx;
			background: url(../../static/img/register.png) no-repeat;
			background-size: 100%;
		}

		.tab-box {

			margin: auto;
			width: 608rpx;

			.tab-item {
				flex: 1;
				height: 80rpx;
				position: relative;

				.tab-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}

				.line-box {
					position: absolute;
					width: 300rpx;
					height: 4rpx;
					background: #fff;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);

					.triangle {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						disply: block;
						width: 0;
						height: 0;
						border-width: 10rpx;
						border-style: solid;
						border-color: transparent transparent #fff transparent;
					}
				}
			}
		}

		// 输入
		.login-box {
			.input-item {
				height: 120rpx;
				border-bottom: 2rpx solid rgba(#ddd, 0.3);
				width: 100%;
				padding: 20rpx 20rpx;

				.inp-title {
					width: 100%;
					display: block;
					font-size: 30rpx;
				}

				.inp {
					// flex: 1;
					width: 100%;
					display: block;
					// height: 100%;
					margin-top: 10rpx;
					font-size: 30rpx;
					padding-left: 20rpx;
				}

				.pl {
					color: #999;
				}

				.code-btn {
					background: none;
					font-size: 28rpx;
					color: #845708;
				}
			}
		}

		.tip-box {
			width: 630rpx;
			line-height: 108rpx;
			font-size: 28rpx;
			font-weight: 400;


			.tcp-radio {
				transform: scale(0.6);
			}

			.tcp {
				// text-decoration: underline;
				// color: rgba(200, 150, 61, 1);
			}
		}

	}
</style>
